<template>
  <div id="app">
    <img alt="logo" src="./assets/logo.jpg" />
    <!-- <block-buy :imei="this.imei"></block-buy> -->
    <div v-show="show">
      <div class="list">
        购买方式：
        <el-select v-model="value" placeholder="请选择购买方式">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 分段内容 -->
      <subsection v-show="this.value === '0'" v-bind="result"></subsection>
      <!-- 永久购买 -->
      <permanent v-show="this.value == 1" v-bind="result"></permanent>
    </div>

    <!-- <input type="file" name="ssss" id=""  accept="image/*" capture="camera"  multiple> -->
    <div v-show="!show" class="bug">
      <p>{{ errTxt }}</p>
      <br />
      <span>{{ timeTxt }}</span>
    </div>
    <div class="jszc">
      <span>郑州三和视讯技术股份有限公司</span>
      <span>联系电话：13633818817 0371-56557107</span>
      <span>Copyright @ 2012-2021.All right reserved</span>
    </div>
  </div>
</template>

<script>
import Subsection from "@/components/Subsection";
import Permanent from "@/components/Permanent";
export default {
  name: "App",
  data() {
    return {
      imei: "",
      show: true,
      purchaseInstallments:1,
      options: [
        {
          value: "0",
          label: "分段购买",
        },
        {
          value: "1",
          label: "永久购买",
        },
      ],
      value: "",
      result: [],
      errTxt: "错误信息",
      timeTxt: "",
    };
  },
  components: {
    Subsection,
    Permanent,
  },
  methods: {},
  mounted() {
    var skipId = window.location.search;
    if (skipId) {
      let imei = skipId.match(/\=(\w*)/)[1];
      this.imei = imei;
      this.$axios
        .get(`/timeManagement/selectNvrByIMEI?nvr_IMEI=${imei}`)
        .then((res) => {
          this.result = res.data.data;
          console.log(res);
          if (res.data.result_code == 405) {
            this.show = false;
            let aa = new Date(res.data.data).getTime();
            console.log(aa == 2145888000000);
            if (aa == 2145888000000) {
              this.errTxt = "当前设备已被购买! ";
            } else {
              this.errTxt = "当前设备已被租赁! ";
              this.timeTxt = `到期时间${res.data.data}`;
            }
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error('与服务器连接出错!')
          this.show = false;
          this.errTxt = "设备信息读取失败,请联系客服!";
        });
    } else {
      this.show = false;
      this.errTxt = "设备信息读取失败,请联系客服!";
    }
  },
};
</script>

<style lang="scss">
#app {
  // font-family: Avenir, Helvetica, Arial, sans-serif;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  min-height: 100vh;
  display: flex;
  background: #f2f2f2;
  max-width: 10rem;
  margin: 0 auto;
  flex-direction: column;
  .jszc {
    flex-grow: 5;
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 15px;
    line-height: 0.42rem;
    font-size: 0.32rem;
    text-align: center;
  }
}

body {
  margin: 0;
  padding: 0;
  background: #f2f2f2;
  .el-input__inner {
    padding: 0.2rem 0.05rem 0.2rem 0.25rem;
    height: 0.9rem;
    font-size: 0.36rem;
  }
  .el-select-dropdown__item {
    height: 0.9rem;
    line-height: 0.9rem;
    font-size: .36rem;
  }
  .el-select .el-input .el-select__caret {
    line-height: 0.9rem;
  }
  img {
    width: 100%;
  }

  ul {
    padding: 0;
    margin: 0;
  }
  li {
    list-style: none;
  }
  .bug p {
    font-size: 0.6rem;
    margin-top: 5rem;
    color: #f56c6c;
  }
  .bug span {
    font-size: 0.4rem;
    color: #f56c6c;
  }
  .list {
    margin: 0.2rem 0;
    text-align: left;
    font-size: 0.43rem;
    line-height: 0.6rem;
    padding: 0.2rem 0 0.2rem 0.25rem;
    box-shadow: 0 0.02rem 0.05rem 0rem rgb(0 0 0 / 10%);
    .el-select {
      width: 6.9rem;
    }
  }
}
.el-row:nth-child(odd) [class*="el-col-"] {
  background: #e5eaec;
}
[class*="el-col-"] {
  text-align: left;
  padding: 0.1rem 0.2rem;
  font-size: 0.34rem;
  line-height: 1.7em;
  letter-spacing: 0.03rem;
  border: 0.01rem solid #dcdfe6;
  border-bottom: 0;
}
.el-row:last-child {
  border-bottom: 0.01rem solid #dcdfe6;
}

.el-col-6 {
  // letter-spacing: .1rem;
  text-align: justify;
  text-align-last: justify;
  border-right: 0;
}
h3 {
  text-align: left;
  padding: 0.2rem 0;
  margin-top: 0.3rem;
  border-bottom: solid 0.01rem #aaa;
  margin-bottom: 0;
  font-size: 0.4rem;
}

#money {
  text-align: right;
  font-size: 0.5rem;
  color: lightcoral;
}
/* 日历样式 */
.el-input__icon {
  line-height: 0.9rem;
}
.el-input--prefix .el-input__inner {
  padding-left: 0.5rem;
}
.el-picker-panel {
  width: 8rem;
  font-size: 0.5rem;
}
.el-date-picker__header-label {
  font-size: 0.36rem;
}
.el-picker-panel__icon-btn {
  font-size: 0.36rem;
}
.el-date-picker .el-picker-panel__content {
  width: 93%;
}
.el-input--small .el-input__inner {
  padding: 0.36rem 0.26rem;
}
.el-date-picker table {
  font-size: 0.3rem;
}
.el-date-table th {
  font-size: 0.36rem;
  line-height: 0.8rem;
}
.el-date-table td {
  padding: 0.2rem 0;
}
.el-date-table td div {
  height: 0.49rem;
}
.el-date-table td span {
  width: 0.46rem;
  height: 0.46rem;
  line-height: 0.46rem;
  font-size: 0.32rem;
}
.el-time-spinner__item {
  line-height: 0.52rem;
  height: 0.529rem;
  font-size: 0.36rem;
}
.el-time-panel {
  width: 3.8rem;
}
.el-time-panel__footer {
  height: 0.82rem;
}
.el-time-panel__btn {
  font-size: 0.36rem;
  padding: 0.2rem 0.2rem;
}
.el-picker-panel__footer button {
  font-size: 0.4rem;
  margin: 0.15rem 0.2rem;
  padding: 0.15rem;
}
.paypage {
  width: 80%;
  margin-top: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.46rem;
}
.el-message {width: 7rem;}
.el-message .el-message--warning{width:7rem;}
.el-message__icon{font-size: .5rem;}
.el-message__content{font-size: .36rem;}
</style>
